import React, { memo } from 'react';
import { useSelector, shallowEqual } from 'react-redux';

import { HeaderRanking } from "./style";

const ThemeHeaderRanking = memo(() => {
  const { listInfo } = useSelector(state => ({
    listInfo: state.getIn(["ranking", "listInfo"])
  }), shallowEqual);

  return (
    <HeaderRanking>
      <div className="left">
        <h3 className="title">歌曲列表</h3>
        <div className="count">{ listInfo.trackCount }首歌</div>
      </div>

      <div className="right">
        <span>播放：</span>
        <span className="count">{ listInfo.playCount }</span>
        <span> 次</span>
      </div>
    </HeaderRanking>
  )
})

export default ThemeHeaderRanking